<template>
  <div class="Login fx-center">
    <div class="login-main">
      <div class="login-title">
        <img src="@I/logo.png" alt />
        <span>{{ title }}</span>
      </div>
      <div class="login-form">
        <el-form ref="formRef" :model="form" label-width="0px" size='default'>
          <el-form-item>
            <el-input v-model="form.user">
              <template #prefix>
                <i class="iconfont icon-yonghu"></i>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input type='password' v-model="form.pas" :show-password="true">
              <template #prefix>
                <i class="iconfont icon-mima"></i>
              </template>
            </el-input>
          </el-form-item>
          <div class="btn">
            <el-button type="primary" class="btn-login" @click="onSubmit">登录</el-button>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { reactive } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
export default {
  name: "LoginHome",
  setup() {
    let title = "梦雨";
    const store = useStore();
    const state = store;
    const router = useRouter();
    const form = reactive({
      user: "Admin",
      pas: "123456",
    });
    const onSubmit = () => {
      state.commit("SET_USER_INFO", {
        name: "梦雨",
        age: "18",
      });
      state.commit("SET_TOKEN", "518888");
      state.commit("initSidebar");
      state.commit("INIT_TABLES");
      router.push('/')
    };
    return {
      title,
      form,
      onSubmit,
    };
  },
};
</script>
<style scoped lang='scss'>
.Login {
  height: 100%;
  background: url("@I/bk.jpg") no-repeat center center / cover;
  position: relative;
  .login-main {
    width: 480px;
    padding: 50px 40px 30px;
    background-color: rgba(255, 255, 255, 0.12); // 0.12
    border-radius: 10px;
    position: absolute;
    box-shadow: 0 0px 4px #dbdada;

    .login-title {
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 56px;
        height: auto;
        margin-right: 24px;
      }
      span {
        font-size: 24px;
        line-height: 64px;
        color: #fff;
        letter-spacing: 1px;
      }
    }
    .login-form {
      margin: 30px 0 20px;
    }
    :deep() .el-form-item {
      margin-bottom: 32px;
      display: flex;
      align-items: center;
      &:nth-child(2) {
        margin-bottom: 28px;
      }
      input {
        height: 46px;
        line-height: 46px;
        font-size: 16px;
        color: #757575;
        // padding-left: 40px;
      }
    }
    .btn {
      .btn-login {
        width: 100%;
        height: 46px;
        line-height: 46px;
      }
    }
  }
}
</style>

